<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery登陆窗口密码输入框支持显示或者隐藏密码</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script>
(function ( $ ) {
    $.fn.togglePassword = function( options ) {
        var s = $.extend( $.fn.togglePassword.defaults, options ),
        input = $( this );

        $( s.el ).bind( s.ev, function() {
            "password" == $( input ).attr( "type" ) ?
                $( input ).attr( "type", "text" ) :
                $( input ).attr( "type", "password" );
        });
    };
    $.fn.togglePassword.defaults = {
        ev: "click"
    };
}( jQuery ));

$(function(){
	$('#password').togglePassword({
		el: '#togglePassword'
	});
});
</script>
</head>

<body>
<div class="login">
	<ul>
		<li><span><label for="email">邮箱：</label></span><input id="email" type="text"></li>
		<li><span><label for="password">密码：</label></span><input id="password" type="password"></li>
		<li class="li3">
         <input type="checkbox" id="remember"><label for="remember">记住密码</label> 
         <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label>
        </li>
		<li class="li4"><input class="submit" type="submit" value="登录"></li>
	</ul>
</div>
</body>
</html>